<template>
  <div class="hotsList">
    <el-card>
      <el-page-header title="产品管理" content="产品列表" />

      <el-table :data="tableData" style="width: 100%; margin-top: 30px">
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="introduction" label="简要描述" />
         
        <el-table-column label="更新时间">
          <template #default="scope">
            {{ formatTime.getTime(scope.row.productTime) }}
          </template>
        </el-table-column>

        <!-- <el-table-column label="是否发布" width="160">
          <template #default="scope">
            <el-switch
              v-model="scope.row.isPublish"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="handleSwitchChange(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column> -->

        <el-table-column label="操作" width="160">
          <template #default="scope">
            <el-button type="success" :icon="Edit" circle @click="handleEdit(scope.row)"></el-button>

            <el-button
              :icon="Star"
              circle
              @click="handlePreview(scope.row)"
            ></el-button>

            <el-popconfirm
              title="确定删除吗？"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleDelete(scope.row)"
            >
              <template #reference>
                <el-button type="danger" :icon="Delete" circle></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog v-model="dialogVisible" title="查看产品" width="40%" >
        <div>
          <h2>{{ previewData.title }}</h2>
          <h4>{{ previewData.introduction }}</h4>
          <div style="font-size: 14px">
            {{ formatTime.getTime(previewData.editTime) }}
          </div>
          <el-divider>
            <el-icon>
              <star-filled></star-filled>
            </el-icon>
          </el-divider>
          <div v-html="previewData.detail" class="contentImg"></div>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import request from "@/util/request";
import formatTime from "@/util/formatTime";
import { Star, Edit, Delete, StarFilled } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter()

const tableData = ref([]);
const previewData = ref({});
const dialogVisible = ref(false);

onMounted(() => {
  getTableData();
});

const getTableData = async () => {
  const res = await request.get("/adminapi/product/productList");
  if (res.data.ActionType === "OK") {
    tableData.value = res.data.data;
  }
};

const caregoryFormat = (caregory) => {
  const arr = ["最新动态", "典型案例", "通知公告"];
  return arr[caregory - 1];
};


// 查看产品
const handlePreview = (data) => {
  previewData.value = data;
  dialogVisible.value = true;
};

// 删除产品
const handleDelete = async (item) => {
  let res =  await request.delete(`/adminapi/product/delete/${item._id}`);
  if(res.data.ActionType === 'OK'){
    ElMessage.success('删除成功')
  }
  await getTableData();
};

//编辑产品
const handleEdit = async (item) => {
  console.log(item);
  
  // 跳转到编辑页面     
  router.push(`/product-manage/productEdit/${item._id}`)
};
</script>

<style scoped lang="scss">
::v-deep .contentImg {
  img {
    max-width: 100%;
  }
}
</style>
